import React from 'react';
import { Modal } from 'antd';
import { getCookie, mountModalToBody } from '@inbiz/utils';

export function UploadFileComponent(props) {
  const { style, ...rest } = props;
  return (
    <iframe
      {...rest}
      frameBorder={0}
      style={{
        height: '100%',
        minHeight: 470,
        width: '100%',
        ...style,
      }}
    ></iframe>
  );
}

interface IFileSelect {
  fit: boolean;
  closable: boolean;
  draggable: boolean;
  noheader: boolean;
  footer: boolean;
  multiple: boolean;
  isCrossDomain: boolean;
  onlyShowFileType: boolean;
}

export default class UploadFile {
  isEformEnv = true;
  strategy = 'rename';
  folderId = 1;

  static instance: UploadFile;
  static getInstance(props?: IFileSelect) {
    if (!UploadFile.instance) {
      UploadFile.instance = new UploadFile(props);
    }
    return UploadFile.instance;
  }

  unmount: () => void;

  constructor(props?: IFileSelect) {
    if (props) {
      for (let key in props) {
        if (Object.hasOwnProperty.call(this, key) && props[key] != null) {
          this[key] = props[key];
        }
      }
    }
  }

  show() {
    const { unmount } = mountModalToBody(
      <Modal
        visible
        width={600}
        title="上传"
        footer={false}
        centered={true}
        onCancel={() => {
          this.hide();
        }}
      >
        <UploadFileComponent src={this.getUrl()} />
      </Modal>,
    );
    this.unmount = unmount;
    return this;
  }

  hide() {
    this.unmount?.();
    this.unmount = null;
    UploadFile.instance = null;
    return this;
  }

  toString() {
    const moduledata = {
      moduleId: 'component/upload/index',
      moduleName: 'upload',
      folderId: this.folderId,
      datas: {
        isEformEnv: this.isEformEnv,
        strategy: this.strategy,
      },
      message: 'message',
    };
    return JSON.stringify(moduledata);
  }

  getUrl() {
    const moduleDataStr = window.encodeURIComponent(this.toString());
    const uploadURL = `/component.html?token=${getCookie(
      'token',
    )}&moduledatatype=proxy&moduledata=${moduleDataStr}`;
    return uploadURL;
  }

  setFolderId(folderId: number) {
    this.folderId = folderId;
  }

  bindUploadEvents = (props: {
    onBeforeUpload?: (file: File) => boolean | void;
    onUploadFinish?: (
      postedFiles: any[],
      successFiles: any[],
      failFiles: any[],
      allFiles: any[],
    ) => void;
    onHideWindow?: () => void;
  }) => {
    window['activeUploaderHost'] = window['activeUploaderHost'] || {};
    window['activeUploaderHost'].onBeforeFileQueued = props.onBeforeUpload;
    window['activeUploaderHost'].onUploadFinish = (
      postedFiles: any[],
      successFiles: any[],
      failFiles: any[],
      allFiles: any[],
    ) => {
      props.onUploadFinish?.(postedFiles, successFiles, failFiles, allFiles);
      this.unbindUploadEvents();
      this.hide();
    };
    window['activeUploaderHost'].onHideWindow = () => {
      window['activeUploaderHost'] = {};
      props.onHideWindow?.();
      this.hide();
    };
    return this;
  };

  unbindUploadEvents = () => {
    window['activeUploaderHost'] = {};
  };
}
